﻿@model DevExtreme.NETCore.Demos.ViewModels.DynamicAppointmentsViewModel

@(Html.DevExtreme().Scheduler()
        .ID("scheduler")
        .DataSource(Model.Appointments)
        .Views(new[] {
SchedulerViewType.Week,
SchedulerViewType.TimelineWeek
        })
        .CurrentView(SchedulerViewType.Week)
        .CurrentDate(DateTime.Today)
        .ShowCurrentTimeIndicator(true)
        .ShadeUntilCurrentTime(true)
        .ShowAllDayPanel(false)
        .Editing(false)
        .Resources(res =>
        {
            res.Add()
                .FieldExpr("MovieId")
                .ValueExpr("Id")
                .DataSource(Model.Resources);
        })
        .Height(600)
        .StartDateExpr("StartDate")
        .EndDateExpr("EndDate")
        .RecurrenceRuleExpr("RecurrenceRule")
        .OnContentReady(@<text>
            function(e) {
            var currentHour = new Date().getHours() - 1;
            e.component.scrollToTime(currentHour, 30, new Date());
            }
        </text>)
            .OnAppointmentClick(@<text>
                function(e) {
                e.cancel = true;
                }
            </text>)
                .OnAppointmentDblClick(@<text>
                    function(e) {
                    e.cancel = true;
                    }
                </text>)
                    .AppointmentTemplate(@<text>
                        <% var movie = getMovieById(appointmentData.MovieId); %>
                        <div class="movie">
                            <img src="<%- movie.Image %>" alt="" />
                            <div class="movie-text"><%- movie.Text %></div>
                        </div>
                    </text>)
)

<div class="options">
    <div class="column">
        <div class="option">
            <div class="label">Current time indicator</div>
            <div class="value">
                @(Html.DevExtreme().Switch()
                            .ID("show-indicator")
                            .Value(true)
                            .OnValueChanged(@<text>
                                function(e) {
                                getSchedulerInstance().option("showCurrentTimeIndicator", e.value);
                                }
                            </text>)
                )
            </div>
        </div>
        <div class="option">
            <div class="label">Shading until current time</div>
            <div class="value">
                @(Html.DevExtreme().Switch()
                            .ID("allow-shading")
                            .Value(true)
                            .OnValueChanged(@<text>
                                function(e) {
                                getSchedulerInstance().option("shadeUntilCurrentTime", e.value);
                                }
                            </text>)
                )
            </div>
        </div>
    </div>
    <div class="column">
        <div class="option">
            <div class="label">Update position in</div>
            <div class="value">
                @(Html.DevExtreme().NumberBox()
                            .ID("update-interval")
                            .Min(1)
                            .Max(1200)
                            .Value(10)
                            .Step(10)
                            .ShowSpinButtons(true)
                            .Width("100px")
                            .Format("#0 s")
                            .OnValueChanged(@<text>
                                function(e) {
                                getSchedulerInstance().option("indicatorUpdateInterval", e.value * 1000);
                                }
                            </text>)
                )
            </div>
        </div>

    </div>
</div>

<script>
    var moviesData = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.Resources));

    function getSchedulerInstance() {
        return $("#scheduler").dxScheduler("instance");
    }

    function getMovieById(id) {
        return DevExpress.data.query(moviesData)
                .filter("Id", id)
                .toArray()[0]
    }
</script>
